<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>
 
        <main class="main" data-info="<%=admin.permission%>">
                <div class="ys-admin-pos c-a1a3aa">
                        首页<span class="f-sum">></span><span class="c-565b6d">文章管理</span><span class="f-sum">></span><span class="c-565b6d">新增</span>
                      </div>
                  
                      <div class="ys-admin-tablist">
                          <div class="ys-admin-tab-header row justify-content-b">
                              <p class="f-14 c-565b6d pl-8 pt-6"></p>
                          </div>
                  
                          <div class="mr-10 ml-10">
                              <form @submit.prevent="checkForm" name="form">
                              <ul class="overflow-h pb-20">
                                  <li class="row  pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">文档标题</label>
                                      </div>
                                      <div class="col-10">
                                          <input type="text" name="title" v-model="params.title" placeholder="最大50字" class="input"/>
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">栏　　目</label>
                                      </div>
                                      
                                      <div class="col-10">
                                           <div class="select flex row">
                                              <select class="flex" name="pid" v-model="params.nav" v-html="optionRender()">
                                              </select>
                                           </div>
                                           {{params.nav}}
                                      </div>
                                  </li>
                                   <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">内容属性</label>
                                      </div>
                                      
                                      <div class="col-bd c-666">
                                          <input class="checkbox pos-r t-2 mr-5" type="checkbox" v-model="params.attr" name="attr" value="头条">头条
                                          <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="推荐">推荐
                                          <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="加粗">加粗
                                          <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="跳转">跳转
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">TAG标签</label>
                                      </div>
                                      <div class="col-10 c-666">
                                          <input type="text" name="tag" id="" placeholder="例新闻,美女" v-model="params.tag" class="input"/>
                                      </div>
                                  </li>
                  
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">关&nbsp; 键&nbsp; 字</label>
                                      </div>
                                      <div class="col-10 c-666">
                                          <input type="text" name="keyword" v-model="params.keyword" placeholder="例yuscms,cms管理系统" id="" class="input"/>
                                      </div>
                                  </li> 
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">缩&nbsp; 略&nbsp; 图</label>
                                      </div>
                                      <div class="col-bd row c-666">
                                          <img v-if="params.thumburl" class="thumb" :src="params.thumburl" alt="">
                                          <span class="ico-camera"><input @change="sendThumb" type="file" name="pic" id="thumb"></span>
                                      </div>
                                      <div class="col-ft col-16 c-999">
                                          (建议图片尺寸：宽度：590px 高：393px ,并且200k之内)
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">文章来源</label>
                                      </div>
                                      <div class="col-10 c-666">
                                          <input type="text" name="source" id="" v-model="params.source" placeholder="请输入文章来源，例网络"  class="input"/>
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">作　　者</label>
                                      </div>
                                      <div class="col-10">
                                          <input type="text" name="author" id="" v-model="params.author" class="input c-666" placeholder="请输入作者，例session.admin_user"/>
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">内容摘要</label>
                                      </div>
                                      <div class="col-10 c-666 row">
                                          <textarea class="flex textarea pt-5" v-model="params.info" name="info" id="" placeholder="请输入内容摘要，(内容摘要200之内)" cols="30" rows="3"></textarea>
                                      </div>
                                  </li>
                                 
                                  <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">栏目内容</label>
                                      </div>
                                      
                                      <div class="col-bd c-666">
                                          <div id="editor" class="pos-r z1">
                                              <p>欢迎使用 <b>yuscms</b> 系统!</p>
                                          </div>
                                          <input type="hidden" name="content" v-model="params.content">
                                      </div>
                                  </li>
                  
                                   <li class="row pd-10 f-14">
                                      <div class="col-hd">
                                          <label class="label">发布时间</label>
                                      </div>
                                      
                                      <div class="col-10">
                                          <el-date-picker v-model="params.date" type="datetime" placeholder="选择日期时间"  format="yyyy-MM-dd HH:mm:ss" >
                                          </el-date-picker>
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-12 row">
                                          <label class="label pt-4">浏览次数</label>
                                          <input type="number" name="count" v-model="params.count" class="flex input c-666" value="0">
                                      </div>
                                       <div class="col-12 row">
                                          <label class="label pt-4 ml-10">消费金币</label>
                                          <input type="number" v-model="params.gold" class="c-666 flex input" pattern="[0-9]*" name="gold">
                                      </div>
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                          <div class="col-12 row">
                                              <label class="label pt-4">文档排序</label>
                                                <div class="select flex pos-r">
                                                  <select name="sort" class="wauto c-666" v-model="params.sort" id="">
                                                      <option value="0">默认排序</option>
                                                      <option value="1">置顶一天</option>
                                                      <option value="2">置顶一周</option>
                                                      <option value="3">置顶一月</option>
                                                      <option value="4">置顶一年</option>
                                                  </select>
                                              </div>
                                          </div>
                                          <div class="col-12 row">
                                          <label class="label pt-4 ml-10">阅读权限</label>
                                          <div class="select flex pos-r">
                                               <select name="readlimit" class="wauto c-666" v-model="params.readlimit" id="">
                                                  <option value="0" selected="selected">开发浏览</option>
                                                  <option value="1">初级会员</option>
                                                  <option value="2">中级会员</option>
                                                  <option value="3">高级会员</option>
                                                  <option value="4">VIP会员</option>
                                              </select>
                                          </div>    
                                      </div>
                                       
                                  </li>
                  
                                  <li class="row pd-10 f-14">
                                      <div class="col-12">
                                          <label class="label">评论选项</label>
                                          <input type="radio" class="radio pos-r t-4 mr-5" v-model="params.comment" name="comment" checked="checked" value="1">允许评论
                                          <input type="radio" class="radio pos-r t-4 mr-5 ml-10" v-model="params.comment" name="comment" value="0">禁止评论
                                      </div>
                                  </li>
                  
                                  <li class="pd-10 mt-35">
                                      <div class="col-hd">
                                      &nbsp;&nbsp;&nbsp;&nbsp;
                                      </div>
                                      <div class="col-bd row ml-35">
                                      <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布"/>
                                      <input name="send" class="btn btn-reset ml-35" type="reset" value="重置"/>
                                      </div>
                                  </li>
                              </ul>
                           </form>
                          </div>
                      </div>
        </main>
     
	<% include global/all-js.html %>
	<script>
		var vm = new Vue({
			el:'.main',
			data:{
                list: [],
      params: {
        title: "",
        nav: "0",
        attr: [],
        tag: "",
        keyword: "",
        thumburl: "",
        source: "网络",
        author: "admin",
        info: "",
        content: "",
        comment: "1",
        count: "0",
        sort: "1",
        gold: "0",
        readlimit: "0",
        date: new Date()}
			},
			methods:{
                getData() {
      var _this = this;
      axios
        .get("/api/admin/category")
        .then(data => {
          var filterData = data.data;
          if (filterData.success) {
            _this.list = filterData.data;
          } else {
            location.href = "/admin/login";
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    optionRender: function() {
      let list = this.list;
      let str = '<option selected="selected" value="0">顶部导航</option>';

      function option(list) {
        for (var item of list) {
          if (item.pid != 0) {
            str += `<option value="${item.id}${"," +
              item.level}">${"&nbsp;&nbsp;".repeat(
              item.level
            )}|-${item.nav_name}</option>`;
          } else {
            str += `<option value="${item.id}${"," +
              item.level}">${item.nav_name}</option>`;
          }
          if (item.children) {
            option(item.children);
          }
        }
      }
      option(list);
      return str;
    },

    sendThumb: function() {
      var _this = this;

      var formData = new FormData();
      formData.append("file", $("#thumb")[0].files[0]);
      var thumb = $("#thumb")
        .val()
        .split(".")[1];

      if (
        thumb != "jpg" &&
        thumb != "gif" &&
        thumb != "jpeg" &&
        thumb != "png"
      ) {
        tipsWarn(_this, "请上传图片！");
        return false;
      }

      if ($("#thumb")[0].files[0].size / 1000 > 200) {
        tipsWarn(_this, "缩略图不能超过200k");
        return false;
      }

      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };

      axios
        .post("/api/admin/article/thumb", formData, config)
        .then(data => {
          let filterData = data.data;
          _this.params.thumburl = filterData.data[0];
        })
        .catch(error => {
          console.error(error);
        });
    },

    editor:function(){
        var _this = this;
        
        var editor = new wangEditor('#editor');
        editor.customConfig.debug = true;
        editor.customConfig.uploadImgServer = '/api/admin/upload/img';//上传到服务器API地址
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.linkCheck = function (text, link) {
            return true
        }
        editor.create();
        $('.w-e-text').on('input',function(){
            _this.params.content = editor.txt.html();
        });
        
    },
    
    articleAdd(){
        let _this = this;
        if(_this.params.nav.includes(',')){
        _this.params.nav =  _this.params.nav.split(',')[0]
        }
    
        axios.post('/api/admin/article/add',_this.params)
        .then((data)=>{
            let filterData = data.data;
            if(filterData.data.affectedRows>=1){
            tips(_this,'添加成功！')
            }
        })
        .catch((error)=>{
            console.log(error);
        }); 
        
    },
    checkForm:function(){
        var _this = this;
        var fm = document.form;

        var _this = this;
        if(_this.params.title == '' || _this.params.title.length<2 || _this.params.title.length>50){
           tipsWarn(_this,'标题不得为空且不能小于两位不大于50位！');
            fm.title.focus();
            return false;
        }

        if(_this.params.tag.length>30){
            tipsWarn(_this,'tag标签长度不能不大于30位！');
            fm.tag.focus();
            return false;
        }

        if(_this.params.keyword.length>30){
           tipsWarn(_this,'关键字长度不能不大于30位！');
            fm.keyword.focus();
            return false;
        }

        if(_this.params.source.length>20){
           tipsWarn(_this,'文章来源长度不能不大于20位！');
            fm.source.focus();
            return false;
        }

        if(_this.params.author.length>10){
           tipsWarn(_this,'作者长度不能不大于10位！');
            fm.author.focus();
            return false;
        }
    
        if(_this.params.info.length > 200){
           tipsWarn(_this,'文章摘要不能超过200个字！');
            return false;
        }

        if(_this.params.content.length<=0){
            tipsWarn(_this,'文章内容不能为空！');
            return false;
        }

        if(_this.params.gold.value<0){
           tipsWarn(_this,'金币不能小于0');
            return false;
        }

        if(_this.params.count<0){
            tipsWarn(_this,'浏览次数不能小于0');
            return false;
        }

        _this.articleAdd()
        
    }
  },

  created: function() {
    this.getData();
  },

  mounted: function() {
    this.editor();
  }
});
	</script>	
	</body>
</html>
